<template>
  <div class="背景">
    <TchHead :welcome="welcome" :title="title" />
    <div class="内容">
      <div class="批改内容标题">题目信息</div>
      <div class="批改显示栏">
        <div class="批改显示框">{{ content }}</div>
        <div class="图片预览">
          <el-image
            style="width: 100px; height: 100px"
            v-if="img1 !== ''"
            :src="img1"
            :preview-src-list="img1List"
          />
          <el-image
            style="width: 100px; height: 100px"
            v-if="img2 !== ''"
            :src="img2"
            :preview-src-list="img2List"
          />
          <el-image
            style="width: 100px; height: 100px"
            v-if="img3 !== ''"
            :src="img3"
            :preview-src-list="img3List"
          />
        </div>
      </div>
      <div style="width: 100%; display: flex; flex-wrap: wrap" v-if="check">
        <div class="批改内容标题">
          {{ subList[flag - 1].stu_id }}-{{ subList[flag - 1].stu_name }}学生答复
        </div>
        <div class="批改显示栏">
          <div class="批改显示框">{{ subList[flag - 1].sub_content }}</div>
          <div class="图片预览">
            <el-image
              style="width: 100px; height: 100px"
              v-if="subList[flag - 1].sub_img1 !== ''"
              :src="subList[flag - 1].sub_img1"
              :preview-src-list="img4List"
            />
            <el-image
              style="width: 100px; height: 100px"
              v-if="subList[flag - 1].sub_img2 !== ''"
              :src="subList[flag - 1].sub_img2"
              :preview-src-list="img5List"
            />
          </div>
        </div>
        <div class="批改内容标题">点评</div>
        <div class="批改显示栏">
          <textarea
            class="输入框 批改输入框"
            rows="6"
            v-model="subList[flag - 1].sub_eval"
          ></textarea>
          <div class="批改信息">
            <div v-for="(item, index) in scoreList" :key="index">
              <input
                type="radio"
                name="评价"
                :id="item.id"
                :value="item.score"
                v-model="subList[flag - 1].sub_score"
              /><label for="评价1">{{ item.score }}</label>
            </div>
          </div>
          <div class="批改信息">
            <button class="下一个按钮" @click="nextUndo">
              下一个（未批改）
            </button>
            <button class="下一个按钮" @click="nextTo">下一个</button>
          </div>
          <div class="提交列表">
            <div
              class="提交单元"
              :class="
                (item.sub_score === '' && item.sub_eval === ''
                  ? '未批改 '
                  : ' ') + (index == flag - 1 ? '批改中' : '')
              "
              v-for="(item, index) in subList"
              :key="index"
              @click="goTo(index)"
            >
              {{ index + 1 }}.{{ item.stu_name }}
            </div>
          </div>
        </div>
      </div>
      <button class="删除按钮" @click="delWork">删除</button>
    </div>
  </div>
</template>
<script>
import TchHead from "@/components/TchHead";
import request from "@/utils/request";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  data() {
    return {
      welcome: "某老师，您好！",
      title: "",
      content: "",
      flag: 1,
      img1: "",
      img2: "",
      img3: "",
      img1List: [],
      img2List: [],
      img3List: [],
      img4List: [],
      img5List: [],
      check: false,
      scoreList: [
        {
          id: "评价1",
          score: "优",
        },
        {
          id: "评价2",
          score: "良",
        },
        {
          id: "评价3",
          score: "及格",
        },
        {
          id: "评价4",
          score: "不及格",
        },
      ],
      subList: [
        {
          sub_content: "",
          sub_eval: "",
          sub_score: "",
          stu_name: "",
        },
      ],
    };
  },
  mounted() {
    // 修改顶部
    this.welcome = localStorage.getItem("zyh_welcome");
    this.title = localStorage.getItem("zyh_cou_name");
    // 载入数据
    request
      .post("/mentor/seeWork.php", {
        work_id: localStorage.getItem("zyh_work_id"),
      })
      .then((res) => {
        if (res.code === "403") {
          this.$router.push("/");
        } else if (res.code !== "200") {
          ElMessage({
            type: "error",
            message: res.msg,
          });
        } else {
          this.content = res.data.work_content;
          this.img1 = res.data.work_img1;
          this.img2 = res.data.work_img2;
          this.img3 = res.data.work_img3;
          this.img1List.push(this.img1);
          this.img2List.push(this.img2);
          this.img3List.push(this.img3);
        }
      });
    this.loadSubmit(0);
  },
  components: {
    TchHead,
  },
  methods: {
    // 加载提交信息
    loadSubmit(index) {
      request
        .post("/mentor/seeSubmit.php", {
          id: localStorage.getItem("zyh_work_id"),
        })
        .then((res) => {
          if (res.code === "403") {
            this.$router.push("/");
          } else if (res.code !== "200") {
            ElMessage({
              type: "error",
              message: res.msg,
            });
          } else {
            if (res.data.length !== 0) {
              this.check = true;
              this.subList = res.data;
              this.flag = index + 1;
              this.img4List.unshift(this.subList[this.flag - 1].sub_img1);
              this.img5List.unshift(this.subList[this.flag - 1].sub_img2);
            }
          }
        });
    },
    // 上传评分
    upSubmit() {
      if (
        this.subList[this.flag - 1].sub_score !== "" ||
        this.subList[this.flag - 1].sub_eval !== ""
      ) {
        request
          .post("/mentor/chaSubmit.php", {
            sub_id: this.subList[this.flag - 1].sub_id,
            sub_eval: this.subList[this.flag - 1].sub_eval,
            sub_score: this.subList[this.flag - 1].sub_score,
          })
          .then((res) => {
            if (res.code === "403") {
              this.$router.push("/");
            } else if (res.code !== "200") {
              ElMessage({
                type: "error",
                message: res.msg,
              });
            }
          });
      }
    },
    nextUndo() {
      this.upSubmit();
      for (
        let i = this.flag, cnt = 0, total = this.subList.length;
        cnt < total;
        cnt++
      ) {
        if (
          this.subList[(i + cnt) % total].sub_score === "" &&
          this.subList[(i + cnt) % total].sub_eval === ""
        ) {
          this.loadSubmit((i + cnt) % total);
          return;
        }
      }
      // const i = this.subList.findIndex(function (item) {
      //   return item.sub_score === "" && item.sub_eval === "";
      // });
      // if (i !== -1) {
      //   this.loadSubmit(i);
      // }
    },
    nextTo() {
      this.upSubmit();
      if (this.flag === this.subList.length) {
        this.loadSubmit(0);
      } else {
        this.loadSubmit(this.flag);
      }
    },
    goTo(i) {
      this.loadSubmit(i);
    },
    delWork() {
      ElMessageBox.confirm("确定删除当前作业？", "警告", {
        confirmButtonText: "确认删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          request
            .post("/mentor/delWork.php", {
              id: localStorage.getItem("zyh_work_id"),
            })
            .then((res) => {
              if (res.code === "403") {
                this.$router.push("/");
              } else if (res.code !== "200") {
                ElMessage({
                  type: "error",
                  message: res.msg,
                });
              } else {
                ElMessage({
                  type: "success",
                  message: "删除成功",
                });
                this.$router.push("/TchWork");
              }
            });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消删除",
          });
        });
    },
  },
};
</script>

<style>
.批改内容标题 {
  min-width: 70px;
  background-color: white;
  padding: 8px 15px;
  border-radius: 5px;
  text-align: center;
}
.批改显示栏 {
  width: 100%;
  margin: 10px 0;
  padding: 10px 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
}
.批改显示框 {
  width: calc(100% - 16px);
  height: 100px;
  padding: 7px;
  background-color: white;
  border: 1px solid #797979;
  border-radius: 10px;
}
.批改信息 {
  margin: 10px 0;
  display: flex;
  justify-content: space-evenly;
}
.图片预览 {
  padding: 10px 0;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}
.批改输入框 {
  width: calc(100% - 10px);
  padding: 5px;
  font-size: 14px;
  line-height: 20px;
  resize: none;
}
.下一个按钮 {
  width: 150px;
  height: 35px;
  border: 1px solid #797979;
  background-color: white;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}
.提交列表 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.提交单元 {
  width: 80px;
  height: 30px;
  border: 1px solid #d8d8d8;
  line-height: 30px;
  text-align: center;
  background-color: green;
  color: white;
}
.未批改 {
  background-color: white;
  color: black;
}
.批改中 {
  background-color: gray;
  color: white;
}
.删除按钮 {
  width: 100px;
  height: 35px;
  margin: 30px 0 0 20px;
  border: none;
  background-color: #ff0000;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  color: #fff;
}
</style>